<script setup>
import { ref, computed } from 'vue'
import { randomStr } from '@/common'
import BookItem from './BookItem.vue'
import NewProjectDialog from './NewProject.vue'

/**
 * 获取数据
 */
const documentList = ref([])
async function getData() {
  for (let i = 0; i < 100; i++) {
    documentList.value.push({ label: `牛逼小说${randomStr(5)}`, id: randomStr() })
  }
}
getData()

/**
 * 搜索，过滤数据展示
 */
const search = ref('')
const displayList = computed(() => {
  return search.value
    ? documentList.value.filter((item) => item.label.includes(search.value))
    : documentList.value
})

// 弹窗是否显示
const newDialogShow = ref(false)
</script>
<template>
  <div class="page-start">
    <div class="action">
      <div class="buttons-wrapper">
        <el-button type="primary" size="large" @click="newDialogShow = true">
          <div class="button-content">
            <i class="iconfont icon-xinjian"></i>
            <span>新建</span>
          </div>
        </el-button>
      </div>
      <div class="search-wrapper">
        <el-input v-model="search">
          <template #prefix>
            <i class="iconfont icon-sousuo"></i>
          </template>
        </el-input>
      </div>
    </div>

    <div class="document-list">
      <BookItem v-for="item in displayList" :key="item.id" :label="item.label"></BookItem>
    </div>
    <NewProjectDialog v-model:show="newDialogShow"></NewProjectDialog>
  </div>
</template>
<style lang="less" scoped>
.page-start {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 50px 50px 0;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  .action {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .buttons-wrapper {
      flex: 1;
    }
    .search-wrapper {
      width: 300px;
    }
    span {
      margin-left: 4px;
    }
  }
  .document-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;

    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
</style>
